<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>借贷管理-详情</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
                    <el-breadcrumb-item>详情</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="8">
                <div class="layout-page-heading-action">
                    <el-button onclick="router.go(-1)"><i class="fa fa-chevron-left"></i>返回</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="panel">
            <h4>基本信息</h4>
            <div class="layout-page-box">
                <el-form :inline="true" label-width="100px" label-position="right" :model="filters" class="search-form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名">
                                <label>{{user.name}}</label>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号码">
                                <label>{{user.mobile}}</label>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证号码">
                                <label>{{user.id_card_no}}</label>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名、身份证、手机是否一致">
                                <label>一致</label>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="panel">
            <h4>影像信息</h4>
            <div class="layout-page-box">
                <el-row>
                    <el-col :span="8" v-for="image in images" :key="image.id" style="min-width:340px;">
                        <el-card :body-style="{ padding: '0px', width: '330px', height: '250px' }"
                                 style="width: 330px;">
                            <img :src="image.url" class="image" width="330px" height="200px">
                            <div style="padding: 14px;">
                                <span>好吃的汉堡</span>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="panel">
            <h4>紧急联系人</h4>
            <div class="layout-page-box">
                <el-table
                        :data="linkmans"
                        border
                        @sort-change="sortChanged"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="mobile"
                            label="手机号码"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="relation"
                            label="关系"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="level"
                            label="等级">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="panel">
            <h4>运营商报告</h4>
            <div class="layout-page-box">
                <el-form :inline="true" label-width="100px" label-position="right" :model="filters" class="search-form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名">
                                <label>{{carrier.name}}</label>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="年龄">
                                <label>{{carrier.age}}</label>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="性别">
                                <label>{{carrier.gender}}</label>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号码">
                                <label>{{carrier.mobile}}</label>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证号码">
                                <label>{{carrier.id_card_no}}</label>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号运营商">
                                <label>{{carrier.id_card_no}}</label>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="运营商建议">
                                <label>{{carrier.rule_engine_risk_level}}</label>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="">
                                <el-button @click="reportView(carrier.report_url1)">风险报告</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="">
                                <el-button @click="reportView(carrier.report_url2)">网络信用报告</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="panel">
            <h4>风险通话检查</h4>
            <div class="layout-page-box">
                <el-table
                        :data="call_checks"
                        border
                        @sort-change="sortChanged"
                        style="width: 100%">
                    <el-table-column
                            prop="type"
                            label="通话类型"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="call_num"
                            label="通话次数">
                    </el-table-column>
                    <el-table-column
                            prop="duration"
                            label="通话时长(秒)">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                user: {
                    name: '张三',
                    id_card_no: '4312231856xxxxxxxx',
                    mobile: '13507xxxx12',
                    age: 33,
                    gender: '男'
                },
                linkmans: [
                    {id: '', name: '联系人1', mobile: '13787xxxx56', relation: '朋友', level: '第一联系人'},
                    {id: '', name: '联系人2', mobile: '13787xxxx56', relation: '配偶', level: '第一联系人'}
                ],
                carrier: {
                    name: '张三',
                    id_card_no: '4312231856xxxxxxxx',
                    mobile: '13507xxxx12',
                    age: 33,
                    gender: '男',
                    carrier_name: '江苏移动',
                    report_url1: '',
                    report_url2: '',
                    rule_engine_risk_level: '建议拒绝'
                },
                images: [
                    {id: '', type: 1, url: 'http://element.eleme.io/static/hamburger.50e4091.png'},
                    {id: '', type: 2, url: 'http://element.eleme.io/static/hamburger.50e4091.png'},
                    {id: '', type: 3, url: 'http://element.eleme.io/static/hamburger.50e4091.png'}
                ],
                call_checks: [
                    {type: '骚扰电话号码通话', call_num: '89', duration: 2648},
                    {type: '骚扰电话号码通话', call_num: '89', duration: 2648},
                ]
            }
        },
        methods: {
            reportView(url){
                var a = document.createElement("a");
                a.setAttribute('target', '_blank');
                a.setAttribute("href", url);
                a.click();
            }
        }
    }
</script>
<style scoped="scoped">
    .el-col{
        min-width: 300px;
    }
</style>